<template>
    <div>
      <div class="card" >
        <el-input v-model="data.key" clearable style="width: 200px;margin-right: 10px" placeholder="请输入订单号"/>
        <el-button type="warning" plain @click="load(data.key)">搜索</el-button>
        <el-button type="danger" plain @click="delAll">批量删除</el-button>
      </div>
      <div class="card" style="margin-top: 5px" >
        <el-table :data="data.tableData" :row-key="getRowKeys" @selection-change="handleSelectionChange" min-height="250" style="width: 100%">
          <el-table-column type="selection" :reserve-selection="true" width="55" />
          <el-table-column label="订单号" >
            <template #default="scope">
              <a href="javascript:void (0)" @click="router.push('orderdateillist?orderno='+scope.row.orderno)">{{scope.row.orderno}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="membername" label="用户信息" />
          <el-table-column label="菜品信息" width="200">
            <template #default="scope">
              <div v-html="scope.row.goodsname" />
            </template>
          </el-table-column>
          <el-table-column prop="total" label="订单金额" />
          <el-table-column  label="就餐人信息">
            <template #default="scope">{{scope.row.name}} {{scope.row.tel}}<br> {{scope.row.slnum}} 人</template>
          </el-table-column>
          <el-table-column  prop="status" label="订单状态" />
          <el-table-column prop="savetime" label="创建日期" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button v-if="scope.row.status==='已付款'" type="warning" plain size="small" @click="Edit(scope.row.id)">核销</el-button>
              <el-button v-if="scope.row.status==='待付款' || scope.row.status==='交易完成'" type="danger" plain  size="small" @click="Delete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="card" v-if="data.total>0" style="display: flex;justify-content: center">
          <el-pagination
              @current-change="load()"
              background
              layout="prev, pager, next"
              v-model:page-size="data.pageSize"
              v-model:current-page="data.pageNum"
              :total="data.total"/>
        </div>
      </div>

    </div>
</template>

<script setup>
import {createApp, onMounted, reactive, ref} from "vue";
import router from "@/router/index.js";
import request from '@/utils/request.js'
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import {sendMsg} from "@/utils/crossTagMsg.js";
//提交时表单校验
const formRef = ref()
const data = reactive({
  key:'',
  key1:'',
  pageNum: 1,
  pageSize: 10,
  total: 0,
  formVisible: false,
  form: {},
  tableData:[],
  title:'',
  ids:[],
})

//信息列表
const load =()=>{
  request.post('ordermsgList', qs.stringify({
    key:data.key,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  })).then(res => {
    data.tableData = res.data.list
    data.total = res.data.total
  })
}


// 订单核销
const Edit = (id) => {
      request.post('ordermsgFH', qs.stringify({
        id:id,
      })).then(res => {
        if (res.code === '200') {
          ElMessage.success('操作成功')
          data.formVisible = false
          load()
          sendMsg('订单更新',1)
        } else {
          ElMessage.error(res.msg)
        }
      })
}

// 删除
const Delete = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', { type: 'warning' }).then(res => {
    request.post('ordermsgDel?id=' + id).then(res => {
      if (res.code === '200') {
        load()
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

//解决跨分页选中后分页取消的情况
const getRowKeys = (row)=>{
  return row.id;
}

//选中需要删除的对象
const handleSelectionChange = (rows)=>{
  data.ids = rows.map(row=>row.id).join()
}
//批量删除
const delAll=()=>{
  if(data.ids.length === 0){
    ElMessage.warning({message:'请选择需要删除的项',plain:true,grouping: true})
    return
  }else{
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', { type: 'warning' }).then(res => {

      request.post('ordermsgDeleteAll',qs.stringify({
        vals:data.ids
      })).then(res => {
        if (res.code === '200') {
          load()
          ElMessage.success('操作成功')
        } else {
          ElMessage.error(res.msg)
        }
      })
    }).catch(err => {})
  }

}
load()
</script>
<style scoped>

</style>
